<template>
	<view class="containar">
		<view class="bg">
			<view class="header-bg"></view>
		</view>

		<view class="header-name">众多车主都在使用的ETC</view>

		<view class="box">

			<!-- 绑定支付宝 -->
			<view class="box-item" :class="navIndex==1?'box-item-active':''" @click="chaneTabs(1)">

				<view class="item-up">
					<view class="up-left">
						<image class="up-left-img" src="/static/img/img8.png" mode="widthFix"></image>
						<text>绑定支付宝/微信-任意切换</text>
					</view>
					<!-- <image v-if="navIndex==1" class="item-up-img" src="/static/img/img6.png" mode=""></image> -->
					<view class="down-price">￥218</view>
				</view>

				<view class="item-down">
					<view class="down-left">
						<view>
							<image class="down-img"src="/static/img/payZFB.png" mode="widthFix"></image>
						</view>
						
						<view class="down-list">
							<view class="list-ul">
								<text class="down-line"></text>
								<view class="list-text">
									<text class="list-red">无合约，无隐藏费用，全国通行永久95折</text>
								</view>
							</view>
							<view class="list-ul ul-li">
								<text class="down-line"></text>
								<!-- <text>全国</text>
								<text class="list-red">95</text>
								<text>折扣</text> -->
								<view class="list-text">新款无卡智能ETC，外观小巧精致，内置芯片 升级，识别速度大幅提升，快速抬杆</view>
							</view>
							<view class="list-ul">
								<text class="down-line"></text>
								<text>支持</text>
								<text class="list-red">支付宝，微信，信用卡，储蓄卡</text>
							</view>
						</view>
					</view>
					<!-- <view class="down-price">￥{{ aliPrice }}</view> -->
				</view>
			</view>

			<!-- 绑定微信 -->
			<view class="box-item" :class="navIndex==2?'box-item-active':''" @click="chaneTabs(2)">

				<view class="item-up2">
					<view class="up-left">
						<image class="up-left-img" src="/static/img/img7.png" mode="widthFix"></image>
						<text>绑定微信</text>
					</view>
					<!-- <image v-if="navIndex==2" class="item-up-img" src="/static/img/img6.png" mode=""></image> -->
					<view class="down-price">￥128</view>
				</view>

				<view class="item-down item-down-front">
					<view class="down-left">
						<view>
							<image class="down-img2" src="/static/img/payWX2.jpg" mode="widthFix"></image>
						</view>
						
						<view class="down-list">
							<view class="list-ul">
								<text class="down-line"></text>
								<view class="list-text">
									<text class="list-yellow">无合约，无隐藏费用，全国通行永久95折</text>
								</view>
							</view>
							<view class="list-ul ul-li">
								<text class="down-line"></text>
								<!-- <text>全国</text>
								<text class="list-yellow">95</text>
								<text>折扣</text> -->
								<view class="list-text">
									<text>新款无卡智能ETC，外观小巧精致，内置芯片 升级，识别速度大幅提升，快速抬杆</text>
								</view>
							</view>
							<view class="list-ul">
								<text class="down-line"></text>
								<text>支持</text>
								<text class="list-yellow">微信余额，信用卡，任意储蓄卡</text>
							</view>
						</view>
					</view>
					<!-- <view class="down-price">￥{{ wxPrice }}</view> -->
				</view>
			</view>

			<!-- 提示 -->
			<view class="show-warn">
				<image class="show-warn-img" src="/static/img/img9.png" mode="widthFix"></image>
				<text>温馨提示:本平台办理的ETC可随时注销，免费注销。</text>
			</view>

		</view>
		<view class="advantage">
			<image class="advantageImg" src="/static/img/advantage.png" mode="widthFix"></image>
		</view>
		<!-- 提交 -->
		<view class="btn">
			<button class="btn-submit" @click="goEtcManage(navIndex)">确认办理</button>
		</view>

	</view>
</template>

<script lang="ts">
	// @ts-nocheck
	import Vue from 'vue';
	export default Vue.extend({
		data() {
			return {
				checked: true,
				navIndex: 1,
				list: [
					{
						id: 1,
						imgTitle: '/static/img/7.png'
					}
				],
				aliPrice: '',
				wxPrice: '',
				price: ''
			}
		},
		onLoad() {
			this.aliPrice = uni.getStorageSync('aliPrice')
			this.wxPrice = uni.getStorageSync('wxPrice')
			this.navIndex = 1
			this.price = this.aliPrice
			// console.log('默认价格', this.navIndex, this.price)
		},
		methods: {
			chaneTabs(index : number) {
				this.navIndex = index
				if (index == 1) {
					this.price = this.aliPrice
				} else {
					this.price = this.wxPrice
				}
				// console.log('绑定的价格：', index, this.price)
			},
			// 同意
			agree() {
				this.checked = !this.checked
			},
			// 隐私协议
			goText() {
				uni.navigateTo({
					url: '/pages/index/txt'
				})
			},
			// 办理ETC
			goEtcManage(navIndex) {
				uni.navigateTo({
					url: '/pages/index/etc-manage?price=' + this.price + '&navIndex=' + navIndex
				})
			}

		}
	})
</script>

<style scoped>
	.containar {
		padding-bottom: 170rpx;
	}
	.bg {
		width: 100%;
		height: 100%;
		background-color: #F6F6F6;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
	}

	.header-bg {
		width: 100%;
		height: 281rpx;
		background-color: #0C77FB;
	}

	.header-name {
		font-size: 30rpx;
		margin-left: 50rpx;
		margin-top: 48rpx;
		margin-bottom: 41rpx;
		color: #ffffff;
	}

	.box {
		margin: 0 30rpx;
		padding: 22rpx 21rpx 25rpx 21rpx;
		border-radius: 15rpx;
		background-color: #ffffff;
	}

	.box-item {
		border-radius: 10rpx;
		background-color: #ffffff;
		/* margin: 2rpx; */
		margin-bottom: 26rpx;
		border: 2rpx solid #ffffff;
	}

	.box-item-active {
		border: 2rpx solid #1777FF;
	}

	.item-up {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: linear-gradient(to right, #d8c4c8, #fffefb);
		padding: 8rpx 0;
		padding-right: 16rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}

	.item-up2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: linear-gradient(to right, #FCF3E0, #FFFFFF);
		padding: 8rpx 0;
		padding-right: 16rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}

	.up-left {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		font-weight: 600;
	}

	.up-left-img {
		width: 141rpx;
		height: 46rpx;
		margin-right: 8rpx;
	}

	.item-up-img {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
	}

	.item-down {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 42rpx 16rpx;
	}

	.item-down-front {
		border-left: 2rpx solid #F8F8F8;
		border-right: 2rpx solid #F8F8F8;
		border-bottom: 2rpx solid #F8F8F8;
	}

	.down-left {
		display: flex;
		align-items: center;
	}

	.down-img {
		width: 119rpx;
		height: 89rpx;
		display: block;
		border-radius: 20rpx;
		margin-right: 18rpx;
	}
    .down-img2 {
    	width: 118rpx;
    	height: 95rpx;
    	display: block;
    	border-radius: 20rpx;
    	margin-right: 18rpx;
    }
	.down-price {
		color: #F93738;
		font-size: 30rpx;
	}

	.down-list {
		font-size: 22rpx;
		color: #929292;
	}

	.down-line {
		width: 4rpx;
		height: 4rpx;
		box-sizing: 6rpx;
		background-color: #000000;
		margin-right: 17rpx;
	}

	.list-ul {
		display: flex;
		align-items: center;
	}

	.ul-li {
		padding: 10rpx 0;
	}

	.list-red {
		color: #FF6269;
	}

	.list-yellow {
		color: #FB7B35;
	}

	/* 提示 */
	.show-warn {
		border-top-left-radius: 10rpx;
		display: flex;
		align-items: center;
		background: linear-gradient(to right, #E4EFF3, #FCFDFE);
		font-size: 22rpx;
		color: #7B8386;
		padding: 15rpx 16rpx;
	}

	.show-warn-img {
		width: 30rpx;
		height: 30rpx;
		border-radius: 5rpx;
		margin-right: 15rpx;
	}

	/* 提交 */
	.btn {
		width: 100%;
		padding-top: 21rpx;
		padding-bottom: 41rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: center;
	}

	.btn-submit {
		width: 598rpx;
		line-height: 101rpx;
		color: #fff;
		background-color: #1A6FFD;
		border-radius: 50rpx;
		font-size: 30rpx;
	}

	button::after {
		border: none;
	}

	/* 我们的优势图片 */
	.advantage {
		width: 690rpx;
		height: 374rpx;
		background: linear-gradient(0deg, #F6FCFD, #FFFFFF);
		box-shadow: 0rpx 14rpx 20rpx 0rpx rgba(162, 213, 247, 0.15);
		border-radius: 20rpx;
		margin: 26rpx auto 0rpx;
		/* border:1rpx solid #1A6FFD; */
	}

	.advantage .advantageImg {
		width: 100%;
		display: block;
	}
	.list-text {
		width: 443rpx;
		line-height: 38rpx;
		text-align: justify;
		/* border:1rpx solid #F93738; */
	}
</style>